const path=require("path");
const webpack=require("webpack");
const htmlWebpackPlugin=require("html-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');//引入vue
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//现在使用这个来提取css:MiniCssExtractPlugin代替了extractextWebpackPlugin
// webpack 4之前的版本是通过webpack.optimize.CommonsChunkPlugin来压缩js，
// webpack 4版本之后被移除了，使用config.optimization.splitChunks来代替。
/**
 * css 压缩 会清除css中注释
 * npm install --save-dev optimize-css-assets-webpack-plugin
 */
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
/**
 * js 压缩
 * npm install uglifyjs-webpack-plugin --save-dev
 * //该插件使用uglify-js缩小JavaScript。
 */
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports ={
    entry:{
        main: path.resolve(__dirname,"./src/main.js"),
        // search: path.resolve(__dirname,"./src/main.js"),有需要的话可以写两个这样的
    },
    output:{
        path:path.resolve(__dirname,"./dist13_vendors"),
        // filename:"bundle.js",//输出文件名
        filename:"js/[name]-[hash:5].js",//输出文件名
        // filename:"[name].[chunkhash:6].js",这样写是可以的
        //设置资源路径的请求地址
        //  style.css ->  /css/   assets/mui.ttf
        //  load的时候配置的name属性 assets/mui.ttf
        // publicPath:'/', // 企业中也可以是www.baidu.com/
    },
    module:{
        rules:[
            // {test:/\.css$/,use:["style-loader",'css-loader']},
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: (resourcePath, context) => {
                                // publicPath is the relative path of the resource to the context
                                // e.g. for ./css/admin/main.css the publicPath will be ../../
                                // while for ./css/main.css the publicPath will be ../
                                return path.relative(path.dirname(resourcePath), context) + '/';
                            },
                        },
                    },
                    'css-loader',
                ],
            },
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            {test: /\.less$/,use:['style-loader','css-loader','less-loader']},
            {
                test: /\.ttf|eot|woff|woff2|svg$/i,
                use: [
                    {
                        loader: 'url-loader',//url-loader依赖了file-loader
                        options: {
                            // esModule: false,
                            // limit:4064,
                            name:'fonts/[name]-[hash:5].[ext]/',
                        }
                    }
                ]
            },
            {
                test: /\.jpg|png|gif$/i,
                use: [
                    {
                        loader: 'file-loader',//url-loader依赖了file-loader
                        options: {
                            esModule: false,
                            limit:4064,
                            name:'assets/[name]-[hash:5].[ext]/',
                        }
                    }
                ]
            },
            {test: /\.vue$/,use:'vue-loader'}
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            //插件执行与元素索引有关
            template:path.resolve(__dirname,"./src/index.html"),//源文件
            filename: "index.html",//最后生成的文件名，可以改名字
            // chunks: ['main']
        }),
        //可以写两个htmlWebpackPlugin这个
        // new htmlWebpackPlugin({
        //     //插件执行与元素索引有关
        //     template:path.resolve(__dirname,"./src/index.html"),//源文件
        //     filename: "index33.html"//最后生成的文件名，可以改名字
        //     chunks: ['search']
        // }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: 'css/[name]_[hash:5].css',
            // chunkFilename: 'css/[id].css',//可加可不加
        }),
        //下面的以下代码将排除vendor.js软件包中任何模块的源映射：
        // new webpack.SourceMapDevToolPlugin({
        //     filename: '[name].js.map',
        //     // exclude: ['vendor.js']
        // })
    ] ,
    mode: 'development',//去掉屎黄色,//开发模式(不压缩)，没有对js等文件压缩，默认生成的是压缩文件
    // devtool: 'inline-source-map',  // 加上对应的配置,去掉警告
    //以下的是optimization.splitChunks压缩js文件的配置
    optimization: {
    //    //分包
        minimizer: [
            new UglifyJsPlugin({
                cache: false,
                parallel: true,
                /**
                 *  sourceMap 和 devtool: 'inline-source-map', 冲突
                 */
                sourceMap: false, // set to true if you want JS source maps,
                /**
                 *  extractComments 导出备注
                 */
                extractComments: 'all'
            }),
            new OptimizeCSSAssetsPlugin({})//清除css中的注释
        ],
        // new webpack.optimize.SplitChunksPlugin({
        //     chunks: 'async',
        //     minSize: 0,                // 最小尺寸，默认0
        //     minChunks: 2,
        //     maxAsyncRequests: 1,       // 最大异步请求数， 默认1
        //     maxInitialRequests: 1,
        //     name:true
        // }),
        // new webpack.optimize.RuntimmeChunkPlugin({
        //
        // })
        splitChunks: {
            chunks: 'async',
            automaticNameDelimiter: '.',
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: 1,
                    name:"vendors"
                }
            }
        },
        runtimeChunk: {
            name:"mainfest",
            name: entrypoint => `runtimechunk~${entrypoint.name}`//改变的时候
        }
        //下面的这个是提取公共部分：optimization，是webpack的内置插件所以直接引用就可
        // splitChunks: {
        //     chunks: "all",         // 代码块类型 必须三选一： "initial"（初始化） | "all"(默认就是all) | "async"（动态加载）
        //     minSize: 0,                // 最小尺寸，默认0
        //     minChunks: 2,              // 最小 chunk ，默认1,minChunks 是split前，有共享模块的chunks的最小数目 ，默认值是1， 但我看示例里的代码在default里把它重写成2了，从常理上讲，minChunks = 2 应该是一个比较合理的选择吧。
        //     maxAsyncRequests: 1,       // 最大异步请求数， 默认1
        //     maxInitialRequests: 1,     // 最大初始化请求书，默认1
        //     name: () => {},            // 名称，此选项课接收 function
        //     cacheGroups: {                // 缓存组会继承splitChunks的配置，但是test、priorty和reuseExistingChunk只能用于配置缓存组。
        //         priority: "0",              // 缓存组优先级,即权重 false | object |
        //         vendor: {                   // key 为entry中定义的 入口名称
        //             chunks: "initial",        // 必须三选一： "initial"(初始化) | "all" | "async"(默认就是异步)
        //             test: /react|lodash/,     // 正则规则验证，如果符合就提取 chunk
        //             name: "vendors",           // 要缓存的 分隔出来的 chunk 名称,里面的name就是生成的共享模块bundle的名字
        //             minSize: 0,
        //             minChunks: 1,
        //             enforce: true,
        //             reuseExistingChunk: true   // 可设置是否重用已用chunk 不再创建新的chunk
        //         }
        //     }
        // }
        //下面这个配置也可以
        // splitChunks: {
        //     cacheGroups: {
        //         commons: {
        //             name: "commons",
        //             chunks: "initial",
        //             minChunks: 2
        //         }
        //     }
        // }
    }
}